<template>
	<div class="bg-white pb-16">
		<add-vote class="mt-8 ml-8 mb-2"></add-vote>
		<div v-for="(item, index) in data" :key="index">
			<t-divider/>
			<div class="pl-8">
				<div class="flex justify-between">
					<span class="pl-4 pr-4 bg-blue-100 pt-1 pb-1 rounded text-blue-500" v-if="disabled(item)">{{diff(item)}} 秒后开始</span>
					<span class="pl-4 pr-4 bg-green-100 pt-1 pb-1 rounded text-green-500" v-if="!disabled(item) && !endVote(item)">进行中</span>
					<span class="pl-4 pr-4 bg-gray-100 pt-1 pb-1 rounded text-gray-500" v-if="endVote(item)">已结束</span>
					<t-button class="mr-8" theme="default" @click="deleteVote(item.vote_log_id)"><delete-icon slot="icon" />删除</t-button>
				</div>
				<h1 class="text-lg mt-2">{{item.vote_text}}</h1>
				<p class="text-gray-600 mb-4 mt-8" v-if="item.user_state === 1 && !endVote(item)">请投出你的一票吧</p>
				<div class="flex" v-if="item.user_state === 1 && !endVote(item)">
					<div v-for="(optionItem, index) in item.vote_option" :key="index" class="mr-4" >
						<t-button
						@click="castVote(optionItem.vote_option_id)"
						:disabled="disabled(item)"
						:theme="optionItem.theme"
						>{{optionItem.vote_option_text}}</t-button>
					</div>
				</div>
				<div class="mt-4" v-if="item.user_state === 0 || endVote(item)">
					<div v-for="(optionItem, index) in item.vote_option" :key="index">
						<p :class="optionItem.class">{{optionItem.vote_option_text}}</p>
						<div style="width: 600px;">
							<t-progress :color="optionItem.color" :percentage="percentage(item, optionItem)" :label="`${optionItem.vote_option_number}人（${percentage(item, optionItem)}%）`"/>
						</div>
					</div>
				</div>
				<p class="text-gray-400 mt-2">还有 {{item.vote_not_number}} 个小可爱未参与投票</p>
				<p class="text-gray-400 mt-8">发起人：<span class="text-gray-900">{{item.vote_creator_name}}</span></p>
				<p class="text-gray-400 mt-2">发布日期：<span class="text-gray-900">{{item.vote_start_date.replace(/-/g,".")}} - {{item.vote_end_date.replace(/-/g,".")}}</span></p>
			</div>
		</div>
		<!-- 删除确认弹窗 -->
		<t-dialog
		header="提示"
		body="确认要删除改投票记录吗？"
		:visible.sync="visible"
		@confirm="onConfirm"
		/>
	</div>
</template>

<script>
	import addVote from './addVote'
	import { getUserId } from '@/unit/auth'
	import dayjs from 'dayjs'
	import { DeleteIcon } from 'tdesign-icons-vue';
	
	export default {
		name: 'Vote',
		components: {
			addVote,
			DeleteIcon
		},
		data(){
			return {
				data: [],
				dayjsvalueOf: dayjs().valueOf(),
				theme: ['primary', 'danger', 'warning', 'success'],
				class: ['text-blue-500', 'text-red-500', 'text-orange-500', 'text-green-500'],
				color: ['#0052d9', '#e34d59', '#ed7b2f', '#00a870'],
				deleteDialog: null,
				visible: false,
				vote_log_id: 0
			}
		},
		methods: {
			// 确认删除
			onConfirm(){
				const body = { vote_log_id: this.vote_log_id }
				this.$store.dispatch('suggestion/deleteVote', body).then(res => {
					if(res.status === 0){
						this.$message.success(res.message)
						const query = { user_id: getUserId() }
						this.getVote(query)
					} else {
						this.$message.error(res.message)
					}
					this.visible = false
				})
			},
			// 删除选项
			deleteVote(id){
				this.visible = true
				this.vote_log_id = id
			},
			// 判断是否结束 true为已结束 false为未结束
			endVote(item){
				return dayjs(item.vote_end_date).valueOf() < this.dayjsvalueOf
			},
			// 获取时间差
			diff(item){
				return Math.abs(dayjs(this.dayjsvalueOf).diff(item.vote_start_date, 'second'))
			},
			// 判断是否开始 true为未开始，false为已开始
			disabled(item){
				return dayjs(item.vote_start_date).valueOf() > this.dayjsvalueOf
			},
			// 定时器获取当前时间
			getDayjs(){
				setInterval(() => {
					this.dayjsvalueOf = dayjs().valueOf()
				}, 1000)
			},
			// 选项进度
			percentage(item, optionItem){
				let number = item.vote_not_number
				item.vote_option.map(itemList => {
					number = number + itemList.vote_option_number
				})
				return parseInt(optionItem.vote_option_number / number * 100)
			},
			// 投票
			castVote(id){
				const body = { 
					vote_option_id: id ,
					user_id: getUserId(),
					vote_person_date: dayjs().format('YYYY-MM-DD')
				}
				this.$store.dispatch('suggestion/castVote', body).then(res => {
					if(res.status === 0){
						this.$message.success(res.message)
						const query = { user_id: getUserId() }
						this.getVote(query)
					}
				})
			},
			// 获取投票记录
			getVote(query){
				this.$store.dispatch('suggestion/getVote', query).then(res => {
					if(res.status === 0){
						this.data = res.data
						// 给每个项目的每个选项设置颜色
						let index = 0
						this.data.map(item => {
							index = 0
							item.vote_option.forEach(optionItem => {
								optionItem.theme = this.theme[index]
								optionItem.class = this.class[index]
								optionItem.color = this.color[index]
								index++
								if(index >= 4){
									index = 0
								}
							})
						})
						// 给每个项目的开始截止时间+8小时
						this.data.forEach(item => {
							item.vote_end_date = dayjs(item.vote_end_date).add(8, 'hour').format('YYYY-MM-DD HH:mm:ss')
							item.vote_start_date = dayjs(item.vote_start_date).add(8, 'hour').format('YYYY-MM-DD HH:mm:ss')
						})
					}
				})
			}
		},
		created() {
			const query = { user_id: getUserId() }
			this.getVote(query)
			this.getDayjs()
			this.$bus.on('getVote', () => {
				const query = { user_id: getUserId() }
				this.getVote(query)
			})
		}
	}
</script>

<style>
	
</style>